<template>
    <div class="container_box">
        <el-scrollbar ref="scrollbarRef" class="main_box2">
            <el-card class="header" shadow="nvner">
                <Step
                    ref="stepRef"
                    :current-step="currentStep"
                    :steps-label="stepsLabel"
                    :total-steps="stepsLabel.length" />
            </el-card>
            <el-card id="content" class="content" shadow="nvner">
                <div v-show="currentStep == 1">
                    <StepOne ref="StepOneRef" />
                </div>
                <div v-show="currentStep == 2">
                    <StepTwo ref="StepTwoRef" />
                </div>
                <div v-show="currentStep == 3">
                    <StepThree ref="StepThreeRef" />
                </div>
                <div v-show="currentStep == 4">
                    <StepFour ref="StepFourRef" />
                </div>
            </el-card>
        </el-scrollbar>
        <div class="footer_box">
            <el-button v-if="currentStep == 1" @click="onBack">取消</el-button>
            <el-button v-else @click="onPrev">上一步</el-button>
            <el-button v-if="currentStep != 4" type="primary" @click="onNext">下一步</el-button>
            <template v-else>
                <el-button v-if="pageType != 'look'" v-debounce="debounce" type="primary">保存</el-button>
                <el-button v-else type="primary" @click="onBack">返回</el-button>
            </template>
        </div>
    </div>
</template>

<script setup lang="ts">
import Step from '@/components/Step.vue';
import StepOne from './components/StepOne.vue';
import StepTwo from './components/StepTwo.vue';
import StepThree from './components/StepThree.vue';
import StepFour from './components/StepFour.vue';

import { createLottery, lookLottery, editLottery } from '@/api/smartMarketing/drainage/luckyDraw';
import bus from '@/utils/bus';

import { ref, onMounted, nextTick, provide } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { ElMessage } from 'element-plus';
const router = useRouter();
const route = useRoute();
// type  copy 复制  edit 编辑
const pageType = route.query.type;
// status  1-未开始 2-已开始 3-已结束 4-提前结束
const status = route.query.status;
const stepRef: any = ref(null);
const currentStep = ref(1);
const stepsLabel: any = ref([
    { title: '活动信息', stepIndex: 1 },
    { title: '奖品设置', stepIndex: 2 },
    { title: '参与设置', stepIndex: 3 },
    { title: '分享海报', stepIndex: 4 }
]);
const scrollbarRef = ref<any>(null);
const StepOneRef = ref<any>(null);
const StepTwoRef = ref<any>(null);
const StepThreeRef = ref<any>(null);
const StepFourRef = ref<any>(null);

const onBack = () => {
    router.back();
};
// 回到页面顶部
const doScrollToTop = () => {
    // document.querySelector('#content')?.scrollTo(0, 0);
    nextTick(() => {
        scrollbarRef.value?.setScrollTop(0);
    });
};
// 上一步
const onPrev = () => {
    currentStep.value--;
    stepRef.value.back();
    doScrollToTop();
};

// 下一步
const onNext = async () => {
    switch (currentStep.value) {
        case 1: // 活动信息
            StepOneRef.value.validate().then(() => {
                bus.emit('stepOne', StepOneRef.value.form.activity_name);
                doScrollToTop();
                currentStep.value++;
                stepRef.value.next();
            });
            break;
        case 2: // 奖品设置
            StepTwoRef.value.validate().then(() => {
                bus.emit('stepTwo', StepTwoRef.value.form.reward_info);
                doScrollToTop();
                currentStep.value++;
                StepThreeRef.value.rewardInfo = StepTwoRef.value.form.reward_info || [];
                stepRef.value.next();
            });
            break;
        case 3: // 参与设置
            StepThreeRef.value.validate().then(() => {
                doScrollToTop();
                currentStep.value++;
                stepRef.value.next();
                StepFourRef.value.initLuckyWheel(StepTwoRef.value.form.reward_info);
            });
            break;
        case 4: // 引流设置
            await StepFourRef.value.onExport();
            StepFourRef.value.validate().then(() => {
                const params = {
                    id: route.query.id,
                    type: 3,
                    ...StepOneRef.value.form,
                    ...StepTwoRef.value.form,
                    config: {
                        ...StepThreeRef.value.form
                    },
                    tag: StepThreeRef.value.tag,
                    ...StepFourRef.value.form,
                    invite_desc_switch: StepThreeRef.value.form.invite_desc_switch
                };
                if (params.period_type == 2) {
                    const endTime = new Date(params.effect_time[1].replace(/-/g, '/')).getTime();
                    const nowTime = new Date().getTime();
                    if (endTime < nowTime) {
                        ElMessage.error('结束时间不能小于当前时间');
                        currentStep.value = 1;
                        doScrollToTop();
                        return;
                    }
                } else {
                    params.effect_time = [];
                }
                if (params.area_restrict === 1) {
                    params.area_value = [];
                }
                if (params.assist_area_restrict === 1) {
                    params.assist_area_value = [];
                }
                if (params.flow_restrict === 2) {
                    params.flow_second = 1;
                    params.flow_assist_num = 50;
                }
                if (pageType === 'edit') {
                    editLottery(params).then(() => {
                        ElMessage.success('编辑成功');
                        onBack();
                    });
                } else {
                    delete params.id;
                    createLottery(params).then(() => {
                        ElMessage.success('新建成功');
                        onBack();
                    });
                }
            });
            break;
    }
};

const debounce = [onNext, 'click', 1000];

// 查看回显
const onLook = async () => {
    const res: any = await lookLottery({ id: route.query.id });
    // 活动信息
    Object.keys(StepOneRef.value.form).forEach((key: any) => {
        StepOneRef.value.form[key] = res[key];
    });
    StepOneRef.value.effectTime = res.effect_time;
    if (res.period_type == 1 && status == '2' && pageType === 'edit') {
        StepOneRef.value.isPeriodType = true;
    }
    if (pageType === 'copy') {
        StepOneRef.value.form.activity_name = `${StepOneRef.value.form.activity_name}副本`;
    }
    // 奖品设置
    StepTwoRef.value.form.reward_info = res.reward_info;
    StepTwoRef.value.onWeight();
    // 参与设置
    Object.keys(StepThreeRef.value.form).forEach((key: any) => {
        StepThreeRef.value.form[key] = res.config[key] || 1;
    });
    StepThreeRef.value.form['invite_desc_switch'] = res.invite_desc_switch;
    bus.emit('tagLook', res.tag);
    // 引流设置
    StepFourRef.value.onLook(res);
};
onMounted(() => {
    status && onLook();
});
</script>

<style scoped lang="scss">
.header {
    border-top: none;
}

.content {
    min-height: calc(100vh - 286px);
    margin-top: 16px;
    border-bottom: none;
    background-color: #fff;
}

:deep(.el-dialog) {
    .el-dialog__header {
        padding: 16px;
    }
}
</style>
